<template>
  <div class="shopCartContainer">
    <MyHeader
      icon="el-icon-shopping-cart-2"
      text="我的购物车"
      tips="温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算"
    />
    <!--  @selection-change="handleSelectionChange" -->
    <div class="shopCartShow">
      <el-table
        ref="multipleTable"
        :data="shopCartList"
        tooltip-effect="dark"
        class="table"
        :header-row-style="{height:'100px'}"
        :row-style="{height:'150px'}"
        @select="changeFlag"
      >
        <el-table-column
          type="selection"
          align="center"
          width="50"
          :value="true"
        >
        </el-table-column>
        <el-table-column
          label="商品名称"
          width="400"
          align="center"
          prop="skuName"
        >
        </el-table-column>
        <el-table-column
          label="单价"
          align="center"
          prop="skuPrice"
        >
        </el-table-column>
        <el-table-column
          label="数量"
          align="skuNum"
        >
          <template slot-scope="{row}">
            <div>
              <el-input-number
                v-model="row.skuNum"
                :min="1"
                :step="1"
                step-strictly
                size="mini"
              ></el-input-number>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="小计"
          align="center"
        >
          <template slot-scope="{row}">
            {{row.skuNum*row.skuPrice}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="{$index}">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="removeItem($index)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 表格底部 -->
      <div class="tableFoot">
        <!-- 底部左 -->
        <div class="footLift">
          <router-link
            class="shop"
            to="/goods"
          >继续购物</router-link>
          <span class="line">|</span>
          <span class="tips"> 共 <i>{{shopCartList.length}}</i> 件商品，已选择 <i>{{selected}}</i> 件</span>
        </div>
        <!-- 底部右 -->
        <div class="footRight">
          <span>
            合计:
          </span>
          <i>{{total}}元</i>
          <div :class="selected>0?'active':'nomel'" @click="goSettlement">去结算</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqShopCart } from "@/api";
export default {
  name: "shopCart",
  data() {
    return {
      shopCartList: [],
      flag:""
    };
  },
  computed: {
    // 是否选中
    selected() {
      let sum = 0;
      this.shopCartList.forEach((item) => {
        if (item.isChecked) {
          sum++;
        }
      });
      return sum;
    },
    total() {
      let sum = 0;
      this.shopCartList.forEach((item) => {
        if (item.isChecked) {
          sum += item.skuNum * item.skuPrice;
        }
      });
      return sum;
    },
  },
  methods: {
    // 删除
    removeItem(index) {
      this.shopCartList.splice(index, 1);
    },
    // 修改选中状态数据
    changeFlag(selection, row) {
      row.isChecked === 1 ? (row.isChecked = 0) : (row.isChecked = 1);
    },
    // 获取购物车数据
    async getShopCart() {
      let result = await reqShopCart();
      console.log(result.data[0].cartInfoList);
      if (result.data[0]) {
        this.shopCartList = result.data[0].cartInfoList;
      }
      this.shopCartList.push = JSON.parse(localStorage.getItem("shopCart"))
      // 默认选中状态
      this.$nextTick(() => {
        this.shopCartList.forEach((item, index) => {
          if (item.isChecked === 1) {
            this.$refs.multipleTable.toggleRowSelection(
              this.shopCartList[index],
              true
            );
          }
        });
      });
    },
    // 去结算
    goSettlement(){
      let orderSettlement = this.shopCartList.filter(item=>item.isChecked===1)
      if(this.selected>0){
        let selected = {
          data:orderSettlement,
        }
        sessionStorage.setItem("orderSettlement",JSON.stringify(selected))
        this.$router.push("/confirmOrder")
      }
    },

  },
  mounted() {
    this.getShopCart();
  },
};
</script>

<style scoped lang="less">
// 购物车容器
.shopCartContainer {
  // 表格容器
  .shopCartShow {
    width: 1220px;
    margin: 0 auto;

    // 表格主题
    .table {
      width: 100%;
      margin-top: 20px;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    }
    // 表格底部
    .tableFoot {
      width: 100%;
      height: 50px;
      margin-top: 20px;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
      padding-left: 20px;

      // 底部---左
      .footLift {
        float: left;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        .line {
          color: #ddd;
          line-height: 50px;
          margin: 0 20px;
        }
        .tips {
          i {
            color: #ff6700 ;
          }
        }
        // 继续购物字体
        .shop{
          color: #333;
          font-size: 16px;
          text-decoration: none;

        }
        .shop:hover{
          color: #ff6700 !important;
          
        }
      
      }
      // 底部---右
      .footRight {
        color: red;
        float: right;
        span {
          font-size: 14px;
          line-height: 50px;
        }
        i {
          font-size: 26px;
          line-height: 50px;
        }
        div {
          float: right;
          height: 50px;
          width: 200px;
          text-align: center;
          line-height: 50px;
          font-size: 18px;
          margin-left: 60px;
        }
        .nomel {
          color: #666;
          background: #ddd;
        }
        .active {
          background: rgb(255, 53, 53);
          color: #fff;
        }
      }
    }
  }
}
</style>